<template>
  <div class="newfriend">
    <div class="nickname">新朋友</div>
    <div class="friendlist">
      <ul>
        <li class="newfriendlist" v-for="(friend, key) in friendRequest" :key="key">
          <div class="listleft">
            <img :src="friend.img" alt class="avatar" />
          </div>
          <div class="listright">
            <p class="name">{{friend.nickname}}</p>
            <span class="state" v-show="friend.state == 1">已添加</span>
            <span
              class="state addfriend"
              v-show="friend.state == 0"
              @click="agreeRequest(friend.id)"
            >添加</span>
            <div class="askmsg">{{friend.requestMsg}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(["friendRequest"])
  },
  methods: {
    ...mapActions(["agreeRequest"])
  }
};
</script>

<style scoped>
.newfriend {
  height: 60px;
  padding: 28px 0 0 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;
}

.newfriend .nickname {
  font-size: 18px;
}

.friendlist {
  margin-top: 30px;
  padding: 0px 70px;
}

.newfriendlist {
  display: flex;
  height: 50px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(185, 185, 185);
}

.listleft {
  position: relative;
  margin-right: 15px;
}

.friendlist .avatar {
  width: 50px;
  height: 50px;
}

.listright {
  position: relative;
  flex: 1;
  margin-top: 4px;
}

.name {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

.state {
  position: absolute;
  right: 0px;
  top: 15px;
  color: #999;
  font-size: 14px;
}

.addfriend {
  display: inline-block;
  width: 60px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background-color: #1aad19;
  cursor: pointer;
}

.askmsg {
  position: absolute;
  font-size: 13px;
  width: 130px;
  height: 15px;
  line-height: 15px;
  color: #999;
  bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>